<template>
  <el-container direction="vertical">
        <el-header>
          <div>
            <span>每日健康打卡管理系统</span>
          </div>
          <div>
            <el-button type="primary" @click="back()">退出</el-button>
          </div>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
              router
              background-color="rgb(51,55,68)"
              text-color="#fff"
              active-text-color="#409eff">
              <el-submenu>
                <template slot="title"><i class="el-icon-message"></i>{{ $router.options.routes[1].name }}</template>
                <el-menu-item v-for="(item,index) in $router.options.routes[1].children" :index="item.path" :class="$route.path==item.path?'is-activity':''">{{item.name}}</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
</template>

<script>
export default {
  data(){
    return{

    }
  },
  name: "index",
  methods: {
    back(){
      this.$router.push("/");
    }
  }
}
</script>

<style scoped="scoped">
html,body,#app,.el-container{
  padding: 0px;
  margin: 0px;
  height: 100%;
}
.el-header {
  background: rgb(55,61,65);
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  color: #fff;
  font-size: 22px;
}
.el-header img{
  vertical-align: middle;
}
.el-aside {
  background: rgb(51,55,68);
}
.el-main{
  background: rgb(234,237,241);
}
</style>
